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Proyecto Integrador Portfolio Web Full Stack 


HYoProgramo 


Objetivo 


Desarrollar una aplicación web full stack, que mostrará: tus datos personales, estudios cursados, experiencia laboral, conocimiento de las 
tecnologías y lo que desees agregar. Es decir, ¡crear tu propio portfolio web! Esta aplicación deberá ser de arquitectura distribuida y contener un 
diseño de interfaz de usuario (front end) que muestre la información, una base de datos que almacene los datos antes mencionados y debe contar 
con las APIs necesarias para proveer a través de internet la información (back end). La idea es que, además de servirte para aplicar lo aprendido 


y que te evaluemos, puedas publicar el portfolio web y usarlo como carta de presentación en el mercado laboral. 


ARQUITECTURA WEB DISTRIBUIDA 


NAVEGADOR SERVIDOR MOTOR DE 
CLIENTE WEB BASE DE DATOS 


DB SERVER 


LOGIN 
CLIENTE 
dos 


PROODLA 


PROVEEDOR 


Spring Boot 


E API Rest 


Tiempo de entrega 

La fecha límite de entrega del portfolio es la fecha de cierre del curso: 15 de enero del 2023. 

El curso fue diseñado en modalidad autogestionada. Esto quiere decir que cada participante puede realizarlo en el tiempo que desee y/o 
disponga, pero siempre dentro de la fecha límite. En la guía del participante les brindamos una organización por mes a modo de consejo, que 
creemos les ayudará a organizar sus tiempos y aprovechar su aprendizaje, pudiendo compartir con el resto de los participantes sus inquietudes en 
los foros de cada módulo e ir creciendo e interactuando al compartir sus resultados. 


Si un alumno completa los requisitos de aprobación plasmados en la guía del participante antes de la fecha de cierre, deberá igualmente esperar 
al cierre del curso para obtener su certificado. 


Wireframe 


A continuación, te presentamos una guía visual que representa el esqueleto o estructura visual del portfolio web que deberás construir y subirlo a 
Heroku para dejarlo funcional y pueda ser revisado. 


En cada Módulo irás apilando el conocimiento necesario, hasta llegar al módulo 9 en donde tendrás la posibilidad de conocer conceptos de 
DevOps, Testing, Seguridad Web y Comunicación Efectiva. 


Te invitamos a securizar tu portfolio web implementando JWT con Spring Boot y Angular. 
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Header 
En la parte superior izquierda 
deberá contener un logo y 
nombre del programa 
"Argentina Programa" 
HYoProgramo 
Deberá tener un Banner 
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Header 
En la parte superior 
derecha deberá contar 
con tus redes sociales y 
un botón que permita 
el login para la edición 


representativo tuyo, siendo 
una parte importante de tu 
identidad evitando cualquier 
fondo que se considere 
ofensivo o fuera de la línea del 


aiticchuidos Banner 


Acerca de... 
En esta sección se 
encuentra tu foto de 
perfil, nombre y titulo 
que tienes (Full Stack 
Developer Jr); En esta 
sección debes poner 
información profesional 
resumida sobre vos. 


Experiencia 
Aquí colocarás toda la 
información de los lugares 
donde has trabajado, 
incluyendo Titulo del puesto, 


periodo, logo de la empresa 
silo encuentras, y 
descripción de las 
actividades realizadas en ese 
puesto, 


Educación 
Escribir toda la 
información de tu 
formación académica, 
certificaciones, cursos, 
y todo lo relacionado al 
título que actualmente 


cuentas, es importante 
detallar la información 
del instituto, el logo de 
ser posible, nombre, 
carrera o título 
estudiado, y en qué 
periodo o año. 


Continúa en la página siguiente .... 
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visualización atractiva 
colocarás tus habilidades 
duras y blandas relacionadas 
contigo y qué grado de 
dominio tienes, puedes 
también generar una sección 
adicional con los idiomas 


(| 
Hard €. Soft Skills 
Visualizado como 
porcentajes u otra forma de 


te encuentras. 


Proyectos 
En esta sección deberá 
encontrarse la 
información sobre los 
proyectos que estuviste 
involucrado o que 
desarrollaste, 
incluyendo este 
portfolio web. Cada 
proyecto deberá 
contener el nombre, 
fecha de realización, 
descripción del 
proyecto y el link a su 
evidencia, en este caso 
podrías adjuntar 
imágenes de ellos. 


La plataforma deberá contar con acceso el cual deberá ser con username y 
password con el objetivo de activar la edición del portfolio Web 
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Botones de edición 


Botón Logout 
AAA A , 
Dd e _—_ Este botón deberá 
cambiar por el de Login 
ya que como estarás 
O desde el modo edición 


necesitarás salir de este 
modo para visualizar tu 
porfolio 


Botones de edición 
El sistema deberá 
contar con botones 
para la edición del 
contenido, 
generalmente 
representados por un 
lápiz, que al 
seleccionarlo haciendo 
clic debería aparecer un 
modal con los 
elementos en modo 
edición. 


Botón para eliminar 
El botón de eliminar te 
permitirá eliminar 
algún elemento de 
alguna sección que 
desees. Comúnmente 
se muestra como una 
yo 


Funciones adicionales 
El portfolio tiene 
formato libre, pero 
siempre puedes 


Ea E) integrar 


funcionalidades 


interesantes como 


"Drag and Drop", que 

te permitirá cambiar el 
e N orden de los elementos 
sin tener que 
eliminarlos. 
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Planificación por módulos 


MÓDULO 1 


Encontraremos las respuestas a por qué es importante programar y de qué se trata. Conoceremos aspectos técnicos sobre cómo viaja la 
información por internet; y cuáles son los elementos conceptuales que componen una aplicación web. También veremos cómo gestionar el tiempo 
de forma eficaz y conoceremos las herramientas y la metodología de trabajo que se utilizan en las empresas para desarrollar un proyecto. 


(1) Objetivo 1: (SCRUM) Crear las historias de usuarios y criterios de aceptación necesarios para desarrollar el Portfolio 
Web. 
ale y Objetivo 2: (GESTIÓN DEL TIEMPO) Planificar las horas de estudio y dedicación. 


¡ Objetivo 3: Diseñar el prototipo del portfolio web. 


vw 


Evaluación + Sugerencia: utilizar herramientas tales como Figma. 


diagnóstico 


Material de lectura > Objetivo 4: (GITHUB) Crear los repositorios para las capas Front-End y Back-End, así ir subiendo el avance de las 
Evaluación > capas del proyecto al repositorio que corresponda, complementando con notas necesarias del prototipo en la wiki. 
Resumen > 

Master class > 

Foro > 

DO Overview  (] Repositories 2 EH Projects  (P Packages YY Stars 
Pinned 
Public 
aso Ya2 
MÓDULO 2 


El objetivo para tu Proyecto Integrador será crear una maqueta Front End con el diseño que desees utilizando HTML, CSS, Boostrap y 
conocer el lenguaje TypeScript. Todo lo hecho y practicado en este módulo lo utilizarás en el módulo 3. 


Comenzaremos a trabajar con lenguajes de etiquetado y de programación que dan forma a todas las páginas web. Adquiriremos los 
conocimientos elementales para diseñar nuestro propio portfolio web. 


Comenzaremos en este módulo a diseñar la maqueta web de lo que será nuestro proyecto integrador. 


Podés ver un modelo de un diseño base como idea inicial para el portfolio web haciendo clic aquí. Pero recordá que podés crear el diseño que 
desees aplicando lo aprendido. 


Objetivo 1: (HTML, CSS, Boostrap) En base al prototipo diseñado previamente, crear la maqueta. 
Objetivo 2: (SCRUM, GESTIÓN DEL TIEMPO) Definir tareas, alcances y estimación de tiempo. 
Desarrollo Front End 


Estático Objetivo 3: (G/THUB) Subir maquetado estático al repositorio (Subir los archivos fuente) 


Evaluación DJ] Overview  [] Repositories E] Projects 
diagnóstico 

Material de lectura 
Evaluación 
Resumen 


Master class 


AR A 


Foro 
ortfolio-FrontEnd Public 


My portfolio 


TypeScript  Y7 250 Y 42 
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MÓDULO 3 


El objetivo para tu Proyecto Integrador será crear el Front End dinámico utilizando Angular, para ello deberás tomar el maquetado estático 
de tu portfolio web realizado en el módulo 2. 


En este módulo nos introduciremos al desarrollo con el framework Angular y la aplicación del patrón MVC. Se abordarán las principales 
estructuras y funciones necesarias para realizar una aplicación del tipo SPA o Single Page Application. 


Te invitamos a que en tu proyecto integrador apliques el rediseño, los conceptos y los nuevos paradigmas que nos permite el framework Angular y 
que contemplen elementos tales como componentes, servicios, proveedores, MVC, etc. 


Para tu portfolio web, nos basaremos en la maqueta realizada anteriormente en HTML, CSS y Javascript, pero ahora el desafío es utilizar Angular 
para diseñar una página SPA. Para ver un diseño podés hacer clic aquí. 


Objetivo 1: (Angular) En base a la maqueta, crear una aplicación SPA (proyecto Angular). 
13) Objetivo 2: (SCRUM, GESTIÓN DEL TIEMPO) Definir tareas, alcances y estimación de tiempo (planning). 


+. Sugerencia: Evaluar la velocidad alcanzada en el módulo anterior para ajustar la estimación 
que corresponde a las tareas de este módulo. 


Desarrollo Front End Dinámico 


Objetivo 3: (GITHUB) Subir los cambios al repositorio correspondiente. 


Evaluación diagnóstico 
Material de lectura . ñ : 
ación e. Sugerencia: Crear una rama para trabajar en los nuevos cambios. 
Resumen 


Master class 
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Foro 


DO Overview [1 Repositories 2 EH Projects 


Pinned 
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MÓDULO 4 


El objetivo para tu Proyecto Integrador será diseñar el DER (diseño conceptual), Modelo Relacional (diseño lógico) y diseño físico para luego 
crear la base de datos en MYSQL que utilizará tu proyecto. 


Comenzaremos a introducirnos en el mundo de las bases de datos. Te mostraremos los pilares fundamentales para que puedas crear los 
modelos de datos y base de datos para tu Portfolio Web crearás una base de datos relacional desde cero normalizada y utilizando SQL (lenguaje 
de consulta estructurada). Podrás manipular los datos. Aprenderás a trabajar con MySQL o MariaDB la base de datos open source más usada en 
las aplicaciones web. 


Comienza a diseñar la base de datos de lo que será tu proyecto integrador y portfolio web, aplicando el conocimiento aprendido sobre cómo 
identificar los datos que debés guardar, organizar los datos en entidades, dibujar las relaciones entre entidades para luego crearlas en MySQL. 
Todos estos conceptos los aplicarás a tu desarrollo y descubrirás el mundo de las bases de datos. 


Para tu portfolio web, te vamos a dejar un diseño base con algunas entidades como idea inicial para que cambies, completes y desarrolles. 
Recordá que en la base debés crear las entidades que necesites aplicando lo aprendido. Para descargar el diseño base hacés clic aquí. 


4) Objetivo 1: (MySQL) Diseño y creación de base de datos 


0 Sugerencia: Diseño: DER (diseño conceptual), Modelo Relacional (diseño lógico) y 
diseño físico (en base de datos) 


Objetivo 2: (SCRUM, GESTIÓN DEL TIEMPO) Definir tareas, alcances y estimación de tiempo. 


O Sugerencia: Evaluar la velocidad alcanzada en el módulo anterior para ajustar la 
estimación que corresponde a las tareas de este módulo. 


Objetivo 3: (GITHUB) Subir el script SQL y el diseño al repositorio. 


Bases de datos 


Evaluación diagnóstico 
Material de lectura 
Evaluación 

Resumen 


Master class 


VVvVovV vov 
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MÓDULO 5 


El objetivo para tu Proyecto Integrador será colaborar para identificar, descubrir, crear e implementar los conceptos de POO en el desarrollo 
creando los objetos para resolver las necesidades de tu proyecto 


Comenzaremos a profundizar sobre el paradigma de la Programación Orientada a Objetos (POO), una forma de pensar problemas de 
programación conceptualizando en objetos que ayudarán a resolver problemas organizando el código, reutilizándolo; y disminuyendo los errores 
en todo tu programa. Veremos las bases del paradigma, diseño y patrones de diseños de POO. 


En esta ocasión para tu portfolio web, el desafío junto con tus compañeros será colaborar para identificar, descubrir, crear e implementar los 
conceptos de POO en el desarrollo creando los objetos para resolver las necesidades de tu proyecto. 


O Objetivo 1: (UML) Diseño el diagrama de clases del proyecto. 
POO buenas prácticas de Objetivo 2: (SCRUM, GESTIÓN DEL TIEMPO) Definir tareas, alcances y estimación de tiempo. 
programación 
o Sugerencia: Evaluar la velocidad alcanzada en el módulo anterior para poder ajustar la estimación 

AA que corresponde a las tareas de este módulo. 

DEA > Objetivo 3: (GITHUB) Subir el diagrama de clases a la wiki del repositorio 

Material de lectura > 

Evaluación > 

Resumen > 

Master class > Notifications 

Foro > 

¡ESTES Pull requests 1 Actions [] Projects Security ““ Insights 
? master » Go to file Code About 
MÓDULO 6 


El objetivo principal para tu Proyecto Integrador será conocer, comprender, utilizar y practicar el lenguaje JAVA para poder programar la capa de 
Back End. 


Comenzaremos conociendo JAVA uno de los lenguajes más utilizados en la industria del desarrollo de software. Conoceremos su sintaxis, 
operadores, estructuras de control, conexión con bases de datos, etc. Este lenguaje se utiliza para desarrollos de las capas de Front End y Back 
End. 


Te invitamos en este módulo a que practiques codificar en este lenguaje porque usamos JAVA para el desarrollo de la capa de Back End de tu 
portfolio web en el módulo 8. 


Objetivo 1: (JAVA) Práctica del lenguaje y creación de clases en Java POO (Encapsulamiento, Herencia, 
Polimorfismo). 
Programación con Java Objetivo 2: (SCRUM, GESTIÓN DEL TIEMPO) Definir tareas, alcances y estimación de tiempo. 


+ Sugerencia: Evaluar tú velocidad alcanzada en el módulo anterior para ajustar la estimación que 


¡o A A 
corresponde a las tareas de este módulo. 


Evaluación diagnóstico 
ide is Objetivo 3: (G!THUB) Subir clases y prácticas al repositorio. 
Evaluación 
Resumen 


Master class 


> E ¿E E E 


Foro 


E ) £ Ministerio de 
om Argentina m 53 Desarrollo Productivo 


len INTI 7 Argentina 


MÓDULO 7 


El objetivo principal para tu Proyecto Integrador será comprender y practicar los conceptos de la programación web utilizando el lenguaje Java 
sin utilizar framework. 


Comenzaremos a conocer el lenguaje JAVA aplicado para desarrollo Web. Ya hemos visto en el módulo 6 lo básico del lenguaje, pero ahora 
profundizaremos en los conceptos de la programación web. Revisaremos los conceptos de JSP, Servlets para comprender cómo opera el lenguaje 
en el cliente y en el servidor, veremos como conectar con la base de datos y por último revisaremos los conceptos HTTP usando JAVA para 
comprender mejor la arquitectura de una API REST. 


Recordá que usaremos el lenguaje JAVA para desarrollar el Back End usando en el módulo 8 del proyecto integrador final. Por ello, debés escribir 
código, buscar y preguntar. Practicando conocerás más profundamente cómo los lenguajes de programación se comunican vía internet con otros 
sistemas y almacenan sus datos. 


En esta ocasión para tu portfolio web, tendrás el desafío junto con tus compañeros de colaborar para practicar, comprender los conceptos y 
realizar las actividades planteadas en JAVA Web para poder aplicar ese conocimiento en tu proyecto final. 


07) Objetivo 1: (JAVA WEB) Práctica de lenguaje Java aplicando conceptos de arquitectura web. 


Objetivo 2: (SCRUM, GESTIÓN DEL TIEMPO) Definir tareas, alcances y estimación de tiempo. 
Programación Web con Java 
+. Sugerencia: Evaluar la velocidad alcanzada en el módulo anterior para ajustar la estimación que 
corresponde a las tareas de este módulo. 
| 


Evaluación diagnóstico Objetivo 3: (GITHUB) Subir proyecto web a GitHub. 
Material de lectura 
Evaluación 
Resumen 


Master class 
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MÓDULO 8 


El objetivo principal para tu Proyecto Integrador será desarrollar la capa Back End para tu portfolio web creando API Rest utilizando un 
framework. 


Conoceremos la tecnología del framework Spring Boot, uno de los más utilizados para el desarrollo de Back End, API Rest, etc. Aprenderás cómo 
utilizar el Spring Boot, su arquitectura, cómo crear proyectos, los patrones de diseño que utiliza y conectarás con bases de datos usando API de 
Java Persistencia (JPA). 


Te invitamos en este módulo a comenzar con la creación de tu Back End para tu portfolio web. Recordá que el Front End tiene datos que mostrar. 
Esos datos están guardados en la base de datos y, para recuperarlos, debés programar las APIs (Back End) integrando ambos para que tu 
proyecto sea modular, con arquitectura distribuida y tenga la posibilidad de conectarse con otros sistemas enviando datos por internet en formato 
JSON. Tené presente que para diseñar las APIs debés saber exactamente qué datos requiere el Front End y esos datos deben existir en la base 
de datos. 


En esta ocasión, para tu portfolio web, tendrás el desafío junto con tus compañeros de colaborar para desarrollar Back End, es decir, crear las 
APIs que necesites para conectar tu desarrollo Front End de Angular con tu desarrollo de base de datos MySQL y así poder conectar el Front End, 
Back End y base de datos usando API Rest. Además, deberás manipular los datos extraídos de la base de datos, que serán enviados en formato 
JSON a través de internet. Te dejamos un archivo JSON como ejemplo. Para descargarlo, hacé clic acá para persona.json y acá para 


educacion.json 


Objetivo 1: (Java Spring Boot) Diseño y creación de las APIs necesarias (back end) para conectar el Front 
End de Angular con la base de datos MySQL implementando arquitectura en capas. 
Back End con Spring Boot Objetivo 2: (SCRUM, GESTIÓN DEL TIEMPO) Definir tareas, alcances y estimación de tiempo. 
+ Sugerencia: Evaluar la velocidad alcanzada en el módulo anterior para ajustar la estimación que 
A corresponde a las tareas de este módulo. 


A Objetivo 3: (GITHUB) Subir proyecto Spring boot al repositorio portfolio-BackEnd. 
Material de lectura 
Evaluación + Sugerencia: Crear ramas para realizar los cambios 


Resumen 


Master class 


V VWoVVoV oy 


Foro 


2 fH Projects  ( Packages YY Stars 


Pinned 


Q portfolio-FrontEnd | Public Q] portfolio-BackEnd Public 
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El objetivo principal para tu Proyecto Integrador será conocer conceptos de DevOps para hacer el Deploy de las capas de tu portfolio web 
(FrontEnd Angular a Firebase, el BackEnd Spring Boot a Heroku y la base de datos MYSQL con Heroku Add On) dejándolo de acceso público y 
funcionando (listo para ser evaluado). 


Tendrás la posibilidad de conocer temas como Testing, Seguridad Web y Comunicación Efectiva. Si buscas un desafío adicional te invitamos a 
securizar tu portfolio web implementando JWT con Spring Boot y Angular. 


O Objetivo 1: (Seguridad JWT Opcional) Integración Front End Angular y Back End Spring Boot con seguridad 
á JWT, Solo si quieres profundizar en la implementación más avanzada puedes implementar JWT. 


DONOps e. (GITHUB Opcional) Subir integración al repositorio. 
Objetivo 2: (SCRUM, GESTIÓN DEL TIEMPO) Definir tareas, alcances y estimación de tiempo. 


+ Sugerencia: Evaluar la velocidad de codificación u objetivo alcanzado en el módulo anterior para 


para ellos utilizarnos Firebase (para Front End Angular), HEROKU (para Back End Spring Boot) y Heroku 
Add On (para la Base de Datos MYSQL). 


Te compartimos lo links a los servicios y te dejamos una imagen con un esquema: 


Master class 


Evaluación diagnóstico > . i Ml á ] 
AE IA > ajustar la estimación de tiempo que has realizado para las tareas de este módulo. 
DA , Objetivo 3 : (Deploy Obligatorio) Subir las distintas capas del proyecto integrador a servicios en la nube, 
Resumen > 
> 
> 


Foro 


: — Firebase: 
' HEROKU: 
' — Heroku Add On con MySQL : https://elements.heroku.com/addons/ttdatabase 


» Firebase 


[5] HEROKUA 
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